<template>
	<view class="confirm">
		<navbar :showBack="true">提交订单</navbar>
		<view class="allAddress">
			<view class="nav acea-row">
				<view class="item font-color"></view>
			</view>
			<view class="address acea-row row-between-wrapper" @click="openAW">
				<view class="addressCon" v-if="addressInfo">
					<view class="name">
						{{addressInfo.real_name}}
						<text class="phone">{{addressInfo.phone}}</text>
					</view>
					<view>
						<text class="font-color" :class="addressInfo.is_default==1?'default':''">{{addressInfo.is_default==1?'[默认]':''}}</text>
						{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{addressInfo.detail}}
					</view>
				</view>
				<view class="addressCon" v-else><view class="setaddress">设置收货地址</view></view>
				<view class="iconfont icon-jiantou"></view>
			</view>
			<view class="line"><image src="../../../static/images/line.jpg" mode=""></image></view>
		</view>
		<order-goods :list="cartInfo"></order-goods>
		<view class="wrapper">
			<view class="item acea-row row-between-wrapper" @click="openCoupon">
				<view>优惠券</view>
				<view class="discount">{{coupon?coupon.coupon_price+'元':'请选择'}}<text class="iconfont icon-jiantou"></text></view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>积分抵扣</view>
				<view class="discount acea-row row-middle">
					<view>{{useIntegral==1?'剩余积分':'当前积分'}}<text class="num font-color">{{useIntegral==1?SurplusIntegral:userInfo.integral}}</text></view>
					<checkbox-group @change="jifenCheck">
						<label>
							<checkbox value="jifen" />
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>会员折扣</view>
				<view class="discount">{{discount}}</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>快递费用</view>
				<view class="discount" v-if="storePostage>0">+￥{{storePostage}}</view>
				<view class="discount" v-else>免运费</view>
			</view>
			<view class="item">
				<view>备注信息</view>
				<textarea v-show="!showAW&&!showCoupon" :value="mark" @input="changeMark" placeholder="请添加备注（150字以内）" />
			</view>
		</view>
		<view class="wrapper">
			<view class="item acea-row row-between-wrapper" @click="openPay">
				<view>支付方式</view>
				<view class="discount" v-if="payType=='weixin'" >
					<view class="name acea-row row-between-wrapper">
						<view class="iconfonts iconfont animated icon-weixin"></view>
						微信支付
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
				<view class="discount" v-else>
					<view class="name acea-row row-between-wrapper">
						<view class="iconfonts2 iconfont icon-yuezhifu"></view>
						余额支付
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
				<!-- <view class="list">
					<view class="payItem acea-row row-middle">
						<view class="name acea-row row-center-wrapper">
							<view class="iconfont animated icon-weixin"></view>
							微信支付
						</view>
						<view class="tip">微信快捷支付</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="moneyList">
			<view class="item acea-row row-between-wrapper">
				<view>商品总价：</view>
				<view class="money">￥{{priceGroup.totalPrice}}</view>
			</view>
			<view v-if="coupon" class="item acea-row row-between-wrapper">
				<view>优惠券：</view>
				<view class="money">-￥{{coupon.coupon_price}}</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>运费：</view>
				<view class="money">+￥{{storePostage}}</view>
			</view>
			<view class="item acea-row row-between-wrapper" v-show="useIntegral==1">
				<view>积分抵扣：</view>
				<view class="money">-￥{{userInfo.integral*integralRatio>=totalPrice?totalPrice:userInfo.integral*integralRatio}}</view>
			</view>
		</view>
		<view style="height: 60px;"></view>
		<view class="footer acea-row row-between-wrapper">
			<view>合计:<text class="font-color">￥{{relPrice}}</text></view>
			<view class="settlement" @click="jiesuan">立即结算</view>
		</view>
		<address-window :show="showAW" @callback="getAddress" @close="closeAW" ref="address"></address-window>
		<coupon-list-window :totalPrice="priceGroup.totalPrice" :show="showCoupon" @output="getCoupon" @close="closeCoupon"></coupon-list-window>
		<payType-window :show="showPay" :payType="payType" @close="closePay" @changeType="changeType"></payType-window>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	const app = getApp();
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				id:"",
				addressInfo:{
					id:"",
					real_name:"",
					phone:"",
					province:"",
					city:"",
					district:"",
					detail:""
				},
				orderKey:"", // 订单信息缓存标识
				cartInfo:[],
				userInfo:{},
				priceGroup:{
					totalPrice:0
				},
				storePostage:0,
				showAW:false,
				showCoupon:false,
				totalPrice:0, // 总金额
				relPrice:0, // 实付金额
				coupon:null,
				mark:"", // 备注信息
				discount:0, //享受折扣
				useIntegral:0, // 是否积分抵扣
				integralRatio:1 ,// 积分抵用比例
				SurplusIntegral:0 , // 剩余积分
				showPay:false, // 是否展示支付方式弹框
				payType:"weixin" //支付方式(weixin:微信支付，yue:余额支付)
			}
		},
		onLoad(e) {
			this.id = e.id; 
			let id = e.id;
			this.orderConfirm(id)
			this.getUserLevel()
		},
		onShow() {
			this.$refs.address.getAddressist();
		},
		methods:{
			orderConfirm:function(id){
				const that = this;
				api.order.confirm(id).then(e=>{
					if(e.status == 200){
						let data = e.data;
						that.addressInfo = data.addressInfo;
						that.cartInfo = data.cartInfo;
						that.userInfo = data.userInfo;
						that.priceGroup = data.priceGroup;
						that.storePostage = data.priceGroup.storePostage;
						that.orderKey = data.orderKey;
						that.integralRatio = data.integralRatio;
						that.getRelPrice()
					}
				})
			},
			getUserLevel:function(){
				const that = this;
				api.user.getUserLevel().then(e=>{
					if(e.status == 200){
						let list = e.data.list.find(o=>o.is_clear);
						that.discount = list?list.discount+"折":"无折扣"
					}
				})
			},
			getRelPrice:function(mod=""){
				const that = this;
				if(this.addressInfo){
					let key = this.orderKey;
					let addressId = this.addressInfo.id;
					let couponId = this.coupon?this.coupon.id:0;
					let useIntegral = this.useIntegral;
					api.order.orderComputed(key,addressId,couponId,useIntegral).then(e=>{
						// console.log(e)
						if(e.status == 200){
							that.relPrice = e.data.result.pay_price;
							that.storePostage = e.data.result.pay_postage;
							that.SurplusIntegral = e.data.result.SurplusIntegral;
							that.totalPrice = e.data.result.total_price;
						}else{
							uni.showToast({
								title:e.msg,
								icon:"none"
							})
							if(mod = "coupon"){
								that.coupon = null
							}
						}
					})
					// console.log("abc",key,addressId,couponId)
				}else{
					let totalPrice = this.priceGroup.totalPrice;
					let storePostage = this.priceGroup.storePostage;
					let youhui = this.coupon?this.coupon.coupon_price:0;
					let integral = this.userInfo.integral;
					let integralRatio = this.integralRatio;
					let jifen = this.useIntegral == 1?integral*integralRatio:0;
					let relPrice = totalPrice + storePostage - youhui - jifen;
					this.relPrice = relPrice;
					this.totalPrice = relPrice;
				}
				// console.log("relPrice",relPrice,totalPrice,storePostage,youhui)
			},
			jifenCheck:function(e){
				let val = e.detail.value;
				if(JSON.stringify(val) != '[]'){
					this.useIntegral = 1
				}else{
					this.useIntegral = 0
				}
				this.getRelPrice()
			},
			jiesuan:function(){
				if(this.jiesuanCheck()){
					let params = {};
					params.key = this.orderKey; // 获取订单信息缓存标识
					params.addressId = this.addressInfo.id; // 获取地址编号
					params.couponId = this.coupon?this.coupon.id:0; // 优惠券编号
					params.useIntegral = this.useIntegral; // 获取是否积分抵扣
					params.mark = this.mark; // 获取留言
					let payType = this.payType; // 获取支付方式
					api.order.orderCreate(params,payType).then(e=>{
						console.log(e)
						uni.showToast({
							icon:"none",
							title:e.msg,
							duration:1000
						})
						setTimeout(function(){
							uni.redirectTo({ // 跳转至订单
								url:"/pages/order_list/order_list"
							})
						},1000)
					})
				}
			},
			jiesuanCheck:function(){
				// console.log("jiesuanCheck",this.addressInfo)
				if(!this.addressInfo){
					this.showErrMsg("地址信息错误")
					return false;
				}else{
					return true;
				}
			},
			showErrMsg:function(msg){
				uni.showToast({
					title:msg,
					icon:"none",
					duration:1000
				})
			},
			getAddress:function(e){
				this.addressInfo = e
				this.getRelPrice()
			},
			changeMark:function(e){
				let cursor = e.detail.cursor
				if(cursor<=150){
					let val = e.detail.value
					this.mark = val;
				}else{
					this.showErrMsg("超出限定长度")
				}
			},
			changeType:function(type){ // 跟换支付方式
				this.payType = type
			}, 
			openAW:function(){
				this.showAW = true
			},
			closeAW:function(){
				this.showAW = false
			},
			getCoupon:function(e){
				this.coupon = e
				this.getRelPrice('coupon')
			},
			openCoupon:function(){
				this.showCoupon = true
			},
			closeCoupon:function(){
				this.showCoupon = false
			},
			openPay:function(){
				this.showPay = true
			},
			closePay:function(){
				this.showPay = false
			},
		}
	}
</script>

<style>
		
	address-window,coupon-list-window{
		z-index: 999;
	}
	.confirm .allAddress{
		width: 100%;
		background: -webkit-linear-gradient(top, #e93323 0%, #f5f5f5 100%);
		background: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
		padding-top: 100rpx;
	}
	.confirm .allAddress .nav{
		width: 710rpx;
		margin: 0 auto;
	}
	.confirm .allAddress .nav .item{
		position: relative;
		width: 250rpx;
	}
	.confirm .allAddress .nav .item::before{
		position: absolute;
		bottom: 0;
		content: "快递配送";
		font-size: 28rpx;
		display: block;
		height: 0;
		width: 336rpx;
		border-width: 0 20rpx 80rpx 0;
		border-style: none solid solid;
		border-color: transparent transparent #fff;
		z-index: 2;
		border-radius: 7rpx 30rpx 0 0;
		text-align: center;
		line-height: 80rpx;
	}
	.confirm .allAddress .address{
		width: 710rpx;
		height: 150rpx;
		margin: 0 auto;
		padding: 28rpx 30rpx;
		background-color: #fff;
		box-sizing: border-box;
	}
	.confirm .allAddress .address .addressCon{
		width: 610rpx;
		font-size: 26rpx;
		color: #666;
	}
	.confirm .allAddress .address .addressCon .setaddress{
		color: #333;
		font-size: 28rpx;
	}
	.confirm .allAddress .address .addressCon .name{
		font-size: 30rpx;
		color: #282828;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.confirm .allAddress .address .addressCon .name{
		font-size: 30rpx;
		color: #282828;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.confirm .allAddress .address .addressCon .name .phone{
		margin-left: 50rpx;
	}
	.confirm .allAddress .address .addressCon .default{
		margin-right: 12rpx;
	}
	.confirm .allAddress .address .iconfont{
		font-size: 35rpx;
		color: #707070;
	}
	.confirm .allAddress .line{
		width: 710rpx;
		height: 2rpx;
		margin: 0 auto;
	}
	.confirm .allAddress .line image{
		display: block;
	}
	.confirm .wrapper{
		background-color: #fff;
		margin-top: 13rpx;
	}
	.confirm .wrapper .item{
		padding: 27rpx 30rpx;
		font-size: 30rpx;
		color: #282828;
		border-bottom: 1px solid #f0f0f0;
	}
	.confirm .wrapper .item .discount{
		font-size: 30rpx;
		color: #999;
	}
	.confirm .wrapper .item .discount .iconfont{
		color: #515151;
		font-size: 30rpx;
		margin-left: 15rpx;
		line-height: 100%;
	}
	.confirm .wrapper .item .discount .num{
		font-size: 32rpx;
		margin-right: 20rpx;
	}
	.confirm .wrapper .item textarea{
		background-color: #f9f9f9;
		width: 690rpx;
		height: 140rpx;
		border-radius: 3rpx;
		margin-top: 30rpx;
		padding: 25rpx 28rpx;
		box-sizing: border-box;
	}
	.confirm .wrapper .item .list{
		margin-top: 35rpx;
	}
	.confirm .wrapper .item .discount .name {
		width: 100%;
		text-align: center;
	}
	.confirm .wrapper .item .discount .name .iconfonts{
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 44rpx;
		color: #fff;
		font-size: 30rpx;
		margin-right: 15rpx;
		background-color: #41b035;
	}
	.confirm .wrapper .item .discount .name .iconfonts2{
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 44rpx;
		background-color: #fe960f;
		color: #fff;
		font-size: 30rpx;
		margin-right: 15rpx;
	}
	.confirm .wrapper .item .list .payItem{
		color: #e93323;
		border: 1px solid #fc5445;
		border-radius: 6rpx;
		height: 86rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
		font-size: 28rpx;
	}
	.confirm .wrapper .item .list .payItem .name{
		width: 50%;
		text-align: center;
		border-right: 1px solid #eee;
	}
	.confirm .wrapper .item .list .payItem .name .iconfont{
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 44rpx;
		background-color: #fe960f;
		color: #fff;
		font-size: 30rpx;
		margin-right: 15rpx;
		background-color: #41b035;
	}
	.confirm .wrapper .item .list .payItem .tip{
		width: 49%;
		text-align: center;
		font-size: 26rpx;
		color: #aaa;
	}
	.confirm .moneyList{
		margin-top: 12rpx;
		background-color: #fff;
		padding: 30rpx;
	}
	.confirm .moneyList .item{
		font-size: 28rpx;
		color: #282828;
	}
	.confirm .moneyList .item:nth-child(n+2){
		margin-top: 20rpx;
	}
	.confirm .moneyList .item .money{
		color: #868686;
	}
	.confirm .footer{
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.confirm .footer .settlement{
		font-size: 30rpx;
		color: #fff;
		width: 240rpx;
		height: 70rpx;
		background-color: #e93323;
		border-radius: 50rpx;
		text-align: center;
		line-height: 70rpx;
	}
</style>
